<template>
	<div id="pvm_test_vue" class="content word-book-content" style="background: rgb(245, 247, 250); padding-top: 20px;">
		<div class="tooltip" :style="{ left:state.menuPosition.x+'px',top:state.menuPosition.y+'px' }"
			@click.stop="addtopWord" v-if="state.wordTxt">加入单词本</div>
		<div class="t_a1">
			<div class="course-a" style="margin-bottom: 15px;"><span>首页 &gt;
					写作剑雅真题(A)
					&gt; <span id="singleName">C18 Test4</span></span></div>
			<div class="write_content">
				<div id="middle_content" style="margin-left: -38px;">
					<div id="single_left" class="flex" style="height: 786px;">
						<div class="sl-a">
							<div class="st-a" :class="{'st-a-active':state.doIndex==1}" @click="changeDo(1)">
								作<br>文<br>题<br>目</div>
							<div class="st-a" :class="{'st-a-active':state.doIndex==2}" @click="changeDo(2)">
								写<br>作<br>思<br>路</div>
						</div>
						<div class="st-div" style="width: 620px; padding: 2% 0px;">
							<div class="single-content2" style="height: 96%; padding: 0px 3%;">
								<div class="html_box" v-html="state.testData.contentText" v-if="state.doIndex==1"></div>
								<div v-html="state.testData.analysis" v-if="state.doIndex==2"></div>
							</div>
						</div>
					</div>
					<div id="single_right">
						<div class="lt_f2" style="height: 786px; width: 694px;">
							<div class="single-content2 lt_f single-content2-icon"
								style="height: 786px; width: 694px; flex: 1 1 0%;" v-if="state.yw_wd == 2">
								<div class="single-content2-top">
									<div class="single-title" style="font-weight: 600;">我的作文</div>
									<div class="single-title-right">
										<i>
											<div class="qp_div"
												style="margin-top: -35px; margin-left: -30px; color: white;display:none;">
												点击重置计时
											</div>
											<img @click="stop()" src="../assets/writing-reset.png"
												style="cursor: pointer; margin-right: 5px; vertical-align: -webkit-baseline-middle;">
										</i>
										<i>
											<div class="qp_div" style="margin-left: -4px; color: white;display:none;">
												点击开始计时
											</div>
											<img @click="start()" :src="state.setInter?state.pauseImg:state.palyImg"
												style="cursor: pointer; margin-right: 5px; vertical-align: -webkit-baseline-middle;">
										</i>
										<span
											class="single-span">答案时长:{{ (parseInt(state.useTime/60)>9?'':'0') +  parseInt(state.useTime/60) + ':' + ((state.useTime%60)>9?'':'0') + (state.useTime%60) }}/20:00</span>
									</div>
								</div>
								<div class="single-content2-in">
									<div class="question">
										<textarea v-model="state.testData.userAnswer"
											placeholder="在此输入作文内容。点击右上方按钮可开始/暂停/重置计时，点击右下方按钮可保存作文内容或提交作文批改"
											style="width: 618px; height: 663px; border: none; padding: 15px; resize: none; text-align: justify;"></textarea>
									</div>
									<div style="display: flex; align-items: center; justify-content: space-between;">
										<div>
											<p class="word-count"></p>
										</div>
										<div><button class="wr-button wr-event" style="margin-top: 16px;"
												@click="countComputed">保存内容<!----></button>
										</div>
									</div>
								</div>
							</div>

							<div class="single-content2 lt_f" style="height: 786px; width: 694px; flex: 1 1 0%;"
								v-if="state.yw_wd == 1">
								<div class="st-div" style="position: relative; padding: 2% 0px; height: 100%;">
									<div class="flex_item" style="position: absolute; right: 4%; opacity: 0.7;">
										<!-- <label
											class="toggle toggle-balanced"><input type="checkbox" v-model="state.ywshow"
												autocomplete="new-password">
											<div class="track">
												<div class="handle"></div>
											</div>
										</label> -->
										<!-- <div class="lt_d lt_d1">译文</div> -->
									</div>
									<div id="listen-scroll" class="single-content2"
										style="height: 100%; padding: 0px 3%; overflow-x: hidden;">
										<div class="flex_item st-h" style="padding: 0px;">
											<div style="display: flex; justify-content: center; align-items: center;">
												<div class="writing-title">高分范文</div>
												<!-- <p class="writing-title-1">7分</p>
												<p class="writing-title-1">196词</p> -->
											</div>
										</div>
										<div class="lt-a lt-list" style="padding: 1rem 0px 0px;">
											<a class="flex" style="width: 100%;">
												<div class="lt-a2" style="font-size: 16px; padding: 0px;">
													<div class="lt-a3" style="font-size: 16px;"
														v-html="state.testData.modelText"></div>
												</div>
											</a>
										</div>
									</div>
								</div>
							</div>
							<div class="sl-a">
								<div @click="yw_wdChange(1)" class="st-a" :class="{'st-a-active':state.yw_wd == 1}"
									style="border-radius: 0px 6px 6px 0px;">
									高<br>分<br>作<br>文
								</div>
								<div @click="yw_wdChange(2)" class="st-a" :class="{'st-a-active':state.yw_wd == 2}"
									style="border-radius: 0px 6px 6px 0px;">
									我<br>的<br>作<br>文
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div id="myCompositionModal" v-if="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true" data-backdrop="static" class="modal fade" style="width: 100%; padding-top: 60px;">
			<div class="modal-dialog" style="width: 620px; height: 750px; margin-left: 49.5%;">
				<div class="modal-content" style="height: 750px;">
					<div class="member-header"><span class="memeber-title" style="padding-left: 15px;">作文题目</span>
						<span class="memeber-title memeber-selected-title" style="padding-left: 8px;">我的作文</span>
						<div class="memeber_bar" style="width: 50px; margin-left: 103px;"></div>
					</div>
					<div class="modal-body" style="display: flex; height: 80%;"><!---->
						<div id="myEs" class="single-content2"
							style="padding: 0px 3%; overflow-y: auto; white-space: pre-line; height: unset; text-align: justify;">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	const router = useRouter()
	const route = useRoute()
	import pause from '../assets/writing-pause.png'
	import palyimg from '../assets/writing-start.png'
	import {
		reactive,
		getCurrentInstance,
		inject
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	const state = reactive({
		pauseImg: pause,
		palyImg: palyimg,
		testData: '',
		doIndex: 1,
		setInter: null,
		allTime: 1200,
		useTime: 0,
		yw_wd: 2,
		textareaContent: '',
		count: 0,
		wordTxt: '',
		menuPosition: {}
		// ywshow: false,
	})


	state.testData = JSON.parse(localStorage.getItem('WriteTest')) || JSON.parse(inject('paperId1'))
	// state.yw_wd = route.query.yw_wd

	function start() {
		if (state.setInter) {
			clearInterval(state.setInter)
			state.setInter = null;
		} else {
			state.setInter = setInterval(() => {
				state.useTime += 1
			}, 1000)
		}
	}

	document.addEventListener('contextmenu', function(event) {
		event.preventDefault(); // 阻止默认菜单
		state.menuPosition = event
		let txt = mouseSelectText()
		state.wordTxt = txt
	});

	document.addEventListener('click', (e) => {
		state.wordTxt = ''
	});

	function mouseSelectText() {
		return window.getSelection().toString();
	}

	function addtopWord() {
		proxy.$http.post('/boot/user/wordBook/add', {
			word: state.wordTxt
		}).then(res => {
			if (res.data.success) {
				alert(res.data.result)
				state.wordTxt = ''
			}
		})
	}

	function countComputed() {
		if (!localStorage.getItem('token')) {
			alert('请先登录')
			window.open('/#/Login?showType=1', '_blank');
			return;
		}
		if (confirm('确定是否提交')) {
			proxy.$http.post('/boot/user/userPaper/add', {
				paperId: state.testData.paperId,
				paperExamList: [{
					examId: state.testData.id,
					userAnswer: state.testData.userAnswer
				}],
			}).then(res => {
				if (res.data.success) {
					alert('保存成功')
				} else {
					alert(res.data.message)
				}
			})
		}
	}

	function stop() {
		clearInterval(state.setInter)
		state.setInter = null
		state.useTime = 0
	}


	function getUserAnswer() {
		proxy.$http.get('/boot/user/userPaper/queryByPaperId?paperId=' + state.testData.paperId).then(res => {
			if (res.data.result.paperExamList) {
				state.testData.userAnswer = res.data.result.paperExamList[0].userAnswer
			}

		})
	}



	function changeDo(index) {
		state.doIndex = index
	}

	function yw_wdChange(index) {
		state.yw_wd = index
	}
	getUserAnswer()
</script>
<style lang="scss">
	[v-cloak] {
		display: none;
	}

	table {
		background: yellow;
	}

	.writing-title {
		font-family: PingFangSC-Semibold;
		font-size: 20px;
		color: #333333;
		font-weight: 600;
	}

	.writing-title-1 {
		background: #f5f7fa;
		border-radius: 17px;
		border-radius: 17px;
		width: 52px;
		height: 20px;
		line-height: 20px;
		font-family: SourceHanSansCN-Regular;
		font-size: 12px;
		color: #90969e;
		text-align: center;
		margin-left: 10px;
	}

	.write_content {
		display: flex;
	}

	.single-content2-in {
		width: 620px;
		height: 665px;
		border: 1px solid #ebebeb;
		border-radius: 4px;
		margin: 0 auto;
	}

	.single-title {
		font-family: PingFangSC-Semibold;
		font-size: 20px;
		color: #333333;
		line-height: 20px;
	}

	/*.single-title-right {*/
	/*display: flex;*/
	/*align-items: flex-end;*/
	/*}*/

	.single-title-right {
		i:hover>div {
			display: block !important;
		}
	}

	.single-content2-top {
		display: flex;
		justify-content: space-between;
		width: 620px;
		margin: 0 auto;
		height: 56px;
		align-items: center;
	}

	.single-span {
		font-family: SourceHanSansCN-Regular;
		font-family: -webkit-body;
		font-size: 14px;
		color: #666666;
		letter-spacing: 0;
		text-align: right;
		vertical-align: -webkit-baseline-middle;
	}

	.word-count {
		font-family: SourceHanSansCN-Regular;
		font-family: -apple-system;
		font-size: 14px;
		color: #000000;
		letter-spacing: 0;
		padding-top: 15px;
		display: inline-block;
	}

	.wr-button {
		background: #ff4b40;
		border-radius: 4px;
		width: 80px;
		height: 26;
		display: inline-block;
		text-align: center;
		line-height: 24px;
		color: white;
		border: none;
	}

	.wr-title-no {
		font-family: SourceHanSansCN-Bold;
		font-size: 18px;
		color: #333333;
		text-align: center;
		line-height: 24px;
		width: 216px;
		height: 48px;
		margin: 0 auto;
		font-weight: 600;
	}

	.wr-title-no p {
		font-family: SourceHanSansCN-Bold;
		font-size: 18px;
		font-weight: 600;
	}

	.wr-title-no1 {
		width: 150px;
		margin: 0 auto;
		margin-top: 10px;
		margin-bottom: 5px;
	}

	.wr-title-no2 {
		width: 236px;
		height: 18px;
		margin: 0 auto;
	}

	.wr-title-no3 {
		width: 174px;
		margin: 0 auto;
		margin-top: 30px;
	}

	.modal-in-order {}

	input,
	button {
		outline: none !important;
	}

	.qt-b1 strong {
		white-space: normal !important;
	}

	.modal-backdrop {
		width: 100%;
	}

	.lt-a {
		text-align: justify;
	}

	.top_dv {
		height: 120px;
		line-height: 120px;
		width: 98%;
		max-width: 1300px;
		margin: 0px auto;
	}

	.top_dv img {
		width: 200px;
		padding-right: 10px;
	}

	.top_dv span {
		font-size: 23px;
		font-family: "Microsoft YaHei", 微软雅黑;
		color: #1f1d1d;
		vertical-align: middle;
		padding-left: 10px;
	}

	.sp_d {
		display: inline-block;
		border-left: 2px solid #949292;
		height: 40px;
		vertical-align: middle;
	}

	.d_t {
		width: 100px;
		height: 40px;
		font-size: 15px;
		display: inline-block;
		text-align: center;
		line-height: 40px;
		cursor: pointer !important;
	}

	.t_a {
		padding: 0;
	}

	.t_a1 {
		padding: 0;
	}

	.t_a2 {
		margin-top: 13px;
	}

	.t_a3 .active {
		background-color: #ff4b40;
	}

	.menu_ul {
		position: absolute;
		/*border: 1px solid #ff4b40;*/
		background-color: #383838;
		z-index: 9999;
		box-shadow: 10px 10px 30px rgb(239 231 231 / 20%);
		box-shadow: rgb(197 196 196) 0px 3px 3px;
		text-align: left;
		min-width: 100px;
	}

	.menu_ul li {
		color: white;
		padding-left: 5px;
	}

	.menu_ul li>.active {
		color: #ff4b40;
	}

	.menu_ul li:hover {
		background-color: #2a2929;
	}

	.user_title {
		display: flex;
		color: black;
		justify-content: center;
		align-items: center;
		margin-left: 5px;
	}

	.user_info {
		position: absolute;
		width: 255px;
		background-color: white;
		z-index: 9999;
		box-shadow: 10px 10px 30px rgb(239 231 231 / 20%);
		border-radius: 5px;
		box-shadow: rgb(197 196 196) 0px 3px 3px;
		/*margin-left: -229px;*/
		margin-left: -259px;
		margin-top: 11px;
	}

	.user_info li {
		color: black;
		text-align: center;
	}

	.user_info li>.active {
		color: #ff4b40;
	}

	.user_info li:hover {
		color: #ff4b40;
		background-color: #f5e4e3;
	}

	.mb_p {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #999999;
		line-height: 24px;
		margin-left: 5px;
		cursor: pointer;
	}

	.mb_p span {
		font-size: 16px;
		color: #333333;
		font-weight: bold;
		display: block;
		cursor: pointer;
	}

	.bd_d {
		width: 230px;
		background: #ebebeb;
		height: 1px;
		margin: auto;
	}

	.us_div {
		display: flex;
		font-size: 14px;
		color: #333333;
		justify-content: space-between;
		padding: 4px 15px 3px 20px;
	}

	.qp_div {
		opacity: 0.6;
		background: #000000;
		border-radius: 45px;
		position: absolute;
		padding: 0px 9px 0px 11px;
		font-family: PingFangSC-Regular;
		font-size: 12px;
		height: 30px;
		line-height: 30px;
		margin-top: -60px;
		margin-left: -70px;
	}

	.us_div span:hover {
		color: #ff4b40;
	}

	.mb_ul img:hover {
		cursor: pointer;
	}

	.mb_ul span:hover {
		cursor: pointer;
	}

	.usInfo:hover {
		color: #ff4b40 !important;
	}

	.modal-btn-none {
		font-size: 14px;
		color: #ffffff;
		border-radius: 6px;
		margin: 0 3.2%;
		cursor: pointer;
		width: 70px;
		height: 25px;
		background: none;
		color: black;
		border: 1px solid black;
	}

	.user_model {
		background-color: #ebebeb;
		width: 140px;
		height: 30px;
		color: #999999;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20px;
	}

	.user_button {
		background: #ffffff;
		box-shadow: 0 0 4px 0 #cccccc;
		border-radius: 4px;
		border-radius: 4px;
		color: #383838;
		cursor: pointer;
	}

	.user_none_button {
		background-color: #ebebeb;
		border-radius: 4px;
		border-radius: 4px;
		color: #999999;
		cursor: pointer;
	}

	.test-button {
		background: #ffefee;
		color: red;
		padding: 5px 10px;
		border-radius: 90px;
		margin-right: 10px;
		cursor: pointer;
		white-space: nowrap;
	}

	.content {
		min-width: 1100px;
	}

	.message_top {
		display: inline-block;
		padding-right: 15px;
		cursor: pointer;
	}

	.message_top strong {
		position: absolute;
		margin-top: -10px;
		color: #ff4b40;
		font-size: 25px;
	}

	.message_num {
		width: 20px;
		height: 20px;
		background-color: red;
		border-radius: 15px;
		display: inline;
		position: absolute;
		margin-top: -4px;
	}

	.message_num>div {
		font-weight: 400;
		font-size: 14px;
		width: 18px;
		height: 20px;
		line-height: 20px;
		text-align: center;
	}

	.tooltip {
		color: red;
		cursor: pointer;
		opacity: 1;
		padding: 5px 8px;
		background: rgb(255, 239, 238);
		border-radius: 4px;
		box-shadow: rgba(159, 159, 159, 0.5) 0px 1px 5px 0px;
		top: 344px;
		left: 716px;
		position: absolute;
	}
</style>